<template>
  <div class="video_wrap">
    <boxWrap :config="config">
      <div class="video_c">
        <div class="title" :style="titleStyleObject">昨夜星辰昨夜风，画楼西畔桂堂东</div>
        <video :src="config.video.url" :style="videoStyleObject" controls autoplay loop muted></video>
        <div class="title" :style="titleStyleObject">昨夜星辰昨夜风，画楼西畔桂堂东</div>
      </div>
    </boxWrap>
  </div>
</template>

<script>
import boxWrap from '../base/boxWrap'
export default {
  name: '',
  components: { boxWrap },
  props: {},
  data() {
    return {
      config: {
        width: 500,
        height: 300,
        x: 700,
        y: 10,
        title: {
          fontSize: 14,
          fontWeight: 'normal',
          lineHeight: 'normal',
          fontColor: '#000000',
          textAlign: 'left',
          letterSpacing: 'normal',
          fontFamily: 'initial',
          backgroundColor: 'transparent',
          paddingTop: 0,
          paddingRight: 0,
          paddingBottom: 0,
          paddingLeft: 0,
          marginTop: 0,
          marginRight: 0,
          marginBottom: 0,
          marginLeft: 0,
        },
        video: {
          width: 300,
          height: 200,
          url: 'https://cdn.uviewui.com/uview/resources/video.mp4',
          backgroundColor: '#999999',
        }
      }
    }
  },
  computed: {
    videoStyleObject() {
      return {
        width: `${this.config.video.width}px`,
        height: `${this.config.video.height}px`,
        backgroundColor: `${this.config.video.backgroundColor}`,
        objectFit: `${this.config.video.objectFit}`,
        borderRadius: `${this.config.video.borderRadius}px`,
      };
    },
    titleStyleObject(){
      return {
        fontSize: `${this.config.title.fontSize}px`,
        fontWeight: `${this.config.title.fontWeight}`,
        lineHeight: `${this.config.title.lineHeight}`,
        fontColor: `${this.config.title.fontColor}`,
        textAlign: `${this.config.title.textAlign}`,
        letterSpacing: `${this.config.title.letterSpacing}`,
        fontFamily: `${this.config.title.fontFamily}`,
        backgroundColor: `${this.config.title.backgroundColor}`,
        paddingTop: `${this.config.title.paddingTop}px`,
        paddingRight: `${this.config.title.paddingRight}px`,
        paddingBottom: `${this.config.title.paddingBottom}px`,
        paddingLeft: `${this.config.title.paddingLeft}px`,
        marginTop: `${this.config.title.marginTop}px`,
        marginRight: `${this.config.title.marginRight}px`,
        marginBottom: `${this.config.title.marginBottom}px`,
        marginLeft: `${this.config.title.marginLeft}px`,
      }
    }
  },
  watch: {},
  created() { },
  mounted() { },
  methods: {}
}
</script>

<style scoped lang="scss">
.video_wrap {}
</style>
